$(function () {
    // 初始化画布拖动
    $("#canvas").mousedown(function(e){
        var canvas = $(this);
        e.preventDefault();
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this, 'call_down' : function(e, posix){
                canvas.css({
                    'cursor': 'move',
                    'top': e.pageY - posix.y,
                    'left': e.pageX - posix.x
                });
            }, 'call_up' : function(){
                canvas.css('cursor', 'default');
            }});
    }).on('mousedown', '.box', function(e) {
        //if(lock) return;
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this});
        e.stopPropagation();
    }).on('mousedown', '.box .coor', function(e) {
        var $box = $(this).parent();
        var posix = {
            'w': $box.width(),
            'h': $box.height(),
            'x': e.pageX,
            'y': e.pageY
        };
        $.extend(document, {'move': true, 'call_down': function(e) {
                $box.css({
                    'width': Math.max(30, e.pageX - posix.x + posix.w),
                    'height': Math.max(30, e.pageY - posix.y + posix.h)
                });
            }});
        e.stopPropagation();
    });
});
var vm = new Vue({
    el:"#rrapp",
    data:{
        visible:false,
        freRate:5000,
        timer:'', // 定时器
        lineImg:'', // 产线信息
        lineCode: getQueryString('lineCode'),
        rateArray:[
            {"name":"每5秒刷新","value":5000},
            {"name":"每10秒刷新","value":10000},
            {"name":"每30秒刷新","value":30000},
            {"name":"每1分钟刷新","value":60000}
        ]
    },
    methods:{
        loadLineData: function(){
            let _this = this;
            // 重新加载数据
            Ajax.request({
                url: "../devPlane/lineData?lineCode=" + _this.lineCode,
                type:'GET',
                async: false,
                contentType: "application/json",
                successCallback: function (r) {
                    if(r.code == 0){
                        _this.lineImg = r.lineData.url;
                    }else{
                        iview.Message.error(r.msg);
                        _this.backForward();
                    }
                }
            });
        },
        refreshPage:function(){
            let _this = this;
            // 清空当前页面设备状态
            $('.box').remove();
            // 重新加载数据
            Ajax.request({
                url: "../devPlane/devCoorSetting?lineCode=" + _this.lineCode,
                type:'GET',
                async: false,
                contentType: "application/json",
                successCallback: function (r) {
                    if(r.code == 0){
                        $.each(r.lineDevCoorSetting, function(i, row){
                            _this.createBox(row,i);
                        });
                    }else{
                        iview.Message.error(r.msg);
                    }
                }
            });
        },
        createBox: function(data,idx){
            var colorValue=null;
            switch (data.state) {
                case 1:
                    colorValue = '#6ec56f';// 运行
                    break;
                case 2:
                    colorValue='#f8e567';//空闲
                    break;
                case 3:
                    colorValue = '#a5a5a5';//离线
                    break;
                case 0:
                    colorValue = '#f10606';//故障
                    break;
                default:
                    colorValue = '#4472c4';//未知
            }
            var dataId = data.id || '';
            //var value = data.code || '';
            // 应刘磊 20201206晚要求，不显示设备编码且透明
            var value = '';
            var color = colorValue;
            var height = data.height || 0;
            var width = data.width || 0;
            var pageX = data.pagex || 0;
            var pageY = data.pagey || 0;

            //创建区域块
            var pos = $("#canvas").position();
            var box = $('<div class="box" rel="'+idx+'" dataId="'+dataId+'"><a href="./deviceMonitor.html?devCode=' + data.code + '" target="_blank"><pre class="content" style="color: #444;">'+value+'</pre><div class="bg transparent" style="opacity:0.3;background-color:'+color+';"></div></a></div>').css({
                width : width,
                height : height,
                top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
            }).appendTo("#canvas");

            //计算文本位置
            box.find('.content').css({
                marginLeft : box.find('.content').width()/2*-1,
                marginTop : box.find('.content').height()/2*-1
            });
        },
        toggleFullScreen: function () {
            // 全屏功能实现
            if (!document.fullscreenElement && // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        },
        freAction: function () {
            //修改刷新频率
            clearInterval(this.timer);
            this.timer = setInterval(this.refreshPage, this.freRate)
        },
        backForward:function(){
            // 返回
            history.go(-1);
        }
    },
    mounted() {
        this.refreshPage();
        // 初次执行
        this.timer = setInterval(this.refreshPage, this.freRate);
    },
    created(){
        this.loadLineData();
    }
})
